import { computed, defineComponent, ref } from 'vue';
import AutoPadding from './AutoPadding.vue';
import Basic from './Basic.vue';
import Captions from './Captions.vue';
import ControlType from './ControlType.vue';
import Controls from './Controls.vue';
import CustomNavigation from './CustomNavigation.vue';
import Fullscreen from './Fullscreen.vue';
import ImageSlides from './ImageSlides.vue';
import InfiniteAutoplay from './InfiniteAutoplay.vue';
import MultiImageSlides from './MultiImageSlides.vue';
import NavigationPosition from './NavigationPosition.vue';
import Thumbnails from './Thumbnails.vue';
import Transitions from './Transitions.vue';
import Vertical from './Vertical.vue';
import VideoSlides from './VideoSlides.vue';
import WithScrollareaFull from './WithScrollareaFull.vue';
import WithScrollareaPadding from './WithScrollareaPadding.vue';
import Demo from './Demo.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
        <div class='block-'>
            <h5 class='title'>Demo</h5>
            <Demo />
          </div>
          <div class='block-'>
            <h5 class='title'>AutoPadding</h5>
            <AutoPadding />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Captions</h5>
            <Captions />
          </div>
          <div class='block-'>
            <h5 class='title'>ControlType</h5>
            <ControlType />
          </div>
          <div class='block-'>
            <h5 class='title'>Controls</h5>
            <Controls />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomNavigation</h5>
            <CustomNavigation />
          </div>
          <div class='block-'>
            <h5 class='title'>Fullscreen</h5>
            <Fullscreen />
          </div>
          <div class='block-'>
            <h5 class='title'>ImageSlides</h5>
            <ImageSlides />
          </div>
          <div class='block-'>
            <h5 class='title'>InfiniteAutoplay</h5>
            <InfiniteAutoplay />
          </div>
          <div class='block-'>
            <h5 class='title'>MultiImageSlides</h5>
            <MultiImageSlides />
          </div>
          <div class='block-'>
            <h5 class='title'>NavigationPosition</h5>
            <NavigationPosition />
          </div>
          <div class='block-'>
            <h5 class='title'>Thumbnails</h5>
            <Thumbnails />
          </div>
          <div class='block-'>
            <h5 class='title'>Transitions</h5>
            <Transitions />
          </div>
          <div class='block-'>
            <h5 class='title'>Vertical</h5>
            <Vertical />
          </div>
          <div class='block-'>
            <h5 class='title'>VideoSlides</h5>
            <VideoSlides />
          </div>
          <div class='block-'>
            <h5 class='title'>WithScrollareaFull</h5>
            <WithScrollareaFull />
          </div>
          <div class='block-'>
            <h5 class='title'>WithScrollareaPadding</h5>
            <WithScrollareaPadding />
          </div>
        </div>
      );
    };
  },
});
